<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="">
        <el-input v-model="queryParams.type" placeholder="模板计划分类" clearable style="width: 150px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList" style="width: 90px">查询</el-button>
        <el-button @click="resetQuery" style="width: 90px">重置</el-button>
        <el-button type="primary" @click="handleAdd" style="width: 90px">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格数据 -->
    <el-table :key="Math.random()" v-loading="loading" :data="railList" height="66vh" border>
      <el-table-column label="模板计划分类" prop="type" />
      <el-table-column label="流程模板名称" prop="flowName" />
      <el-table-column label="流程模板" prop="flowId" />
      <el-table-column label="默认模板" prop="flowId">
        <template #default="scope">
          <el-switch
            v-model="scope.row.isDefault"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            @click="changewitch(scope.row)"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="80">
        <template #default="scope">
          <div class="buttontext">
            <el-button link type="primary" @click="queryProcess(scope.row)">查看流程图</el-button>
            <el-button link type="primary" @click="handleUpdate(scope.row)">修改</el-button>
            <el-button link type="primary" @click="handDelete(scope.row.id)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="选择模板" v-model="open" width="600px" append-to-body draggable>
      <el-form ref="userRef" :model="form" label-width="120px" :inline="true" :rules="rules">
        <el-form-item label="模板计划分类" prop="type">
          <el-cascader style="width: 250px" :props="defaultProps1" :options="typeobj" v-model="form.type" />
        </el-form-item>
        <el-form-item label="流程模板" prop="flowId">
          <el-cascader
            style="width: 250px"
            :props="defaultProps"
            :options="isShowselectionProcessList"
            :show-all-levels="false"
            v-model="form.flowId"
            @change="changeCascader"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog title="流程模板" v-model="isShowProcess" width="1200px" append-to-body draggable @close="closeDialog">
      <ProcessVue ref="ProcessVueRef" v-if="isShowProcess" :workIdParam="workIdParam"></ProcessVue>
    </el-dialog>
  </div>
</template>
<script setup name="Bridge">
import {
  selectWorkflowTemplateListapi,
  selectWorkflowTemplateTreeapi,
  insertWorkflowAssociatedPlanapi,
  insertWorkflowTemplateapi,
  editWorkflowTemplateapi,
  deleteWorkflowTemplateByIdapi,
} from "@/api/main/api.js";
import { ElMessage } from "element-plus";
import { reactive, ref, toRefs } from "vue";
import selectProcessVue from "@/components/planModle/selectProcess.vue";
import ProcessVue from "@/components/planModle/Process.vue";
const { proxy } = getCurrentInstance();
const title = ref("新增");
const loading = ref(true);
const open = ref(false);
const isShowProcess = ref(false);

const data = reactive({
  railList: [],
  railListarr: [],
  queryParams: {
    flowId: "",
    type: "",
  },
  rules: {
    type: [{ required: true, message: "模板计划分类不能为空", trigger: ["blur", "change"] }],
    flowId: [{ required: true, message: "流程模板不能为空", trigger: ["blur", "change"] }],
  },
  isShowselectionProcessList: [],
  defaultProps: {
    children: "children",
    label: "flowName1",
    value: "flowId",
  },
  defaultProps1: {
    children: "children",
    label: "label",
    value: "label",
  },
  form: {
    flowId: [],
    type: [],
    flowName: "",
    isDefault: "",
  },
  actionSubmitParam: {
    accessToken: sessionStorage.getItem("accessToken"),
    workId: "",
    trackId: "",
    nodeId: "",
    actionData: {
      operate: "submit",
      operateClazz: "com.horizon.wf.action.ActionSubmit",
      operateFlag: 0,
      operateText: "提交",
      reOpen: "false",
    },
  },
  typeobj: [
    {
      label: "年计划",
      id: "4",
      children: [
        {
          label: "年度施工轮廓计划",
          id: "4-1",
          children: [
            {
              label: "审批",
              id: "4-1-1",
            },
            {
              label: "作废",
              id: "4-1-2",
            },
            {
              label: "调整",
              id: "4-1-3",
            },
          ],
        },
        {
          label: "年度桥隧函维修计划",
          id: "4-2",
          children: [
            {
              label: "审批",
              id: "4-2-1",
            },
            {
              label: "作废",
              id: "4-2-2",
            },
            {
              label: "调整",
              id: "4-2-3",
            },
          ],
        },
        {
          label: "年度线路、道岔维修计划",
          id: "4-3",
          children: [
            {
              label: "审批",
              id: "4-3-1",
            },
            {
              label: "作废",
              id: "4-3-2",
            },
            {
              label: "调整",
              id: "4-3-3",
            },
          ],
        },
        {
          label: "年度信号维修计划",
          id: "4-4",
          children: [
            {
              label: "审批",
              id: "4-4-1",
            },

            {
              label: "作废",
              id: "4-4-2",
            },
            {
              label: "调整",
              id: "4-4-3",
            },
          ],
        },
      ],
    },
    {
      label: "月计划",
      id: "1",
      children: [
        {
          label: "施工计划",
          id: "1-1",
          children: [
            {
              label: "审批",
              id: "1-1-1",
            },
            {
              label: "作废",
              id: "1-1-2",
            },
            {
              label: "调整",
              id: "1-1-3",
            },
          ],
        },
        {
          label: "桥隧函保养修",
          id: "1-2",
          children: [
            {
              label: "审批",
              id: "1-2-1",
            },
            {
              label: "作废",
              id: "1-2-2",
            },
            {
              label: "调整",
              id: "1-2-3",
            },
          ],
        },
        {
          label: "线路保养修",
          id: "1-3",
          children: [
            {
              label: "审批",
              id: "1-3-1",
            },
            {
              label: "作废",
              id: "1-3-2",
            },
            {
              label: "调整",
              id: "1-3-3",
            },
          ],
        },
        {
          label: "信号维修",
          id: "1-4",
          children: [
            {
              label: "审批",
              id: "1-4-1",
            },

            {
              label: "作废",
              id: "1-4-2",
            },
            {
              label: "调整",
              id: "1-4-3",
            },
          ],
        },
      ],
    },
    {
      label: "周计划",
      id: "2",
      children: [
        {
          label: "施工计划",
          id: "2-1",
          children: [
            {
              label: "审批",
              id: "2-1-1",
            },
            {
              label: "作废",
              id: "2-1-2",
            },
            {
              label: "调整",
              id: "2-1-3",
            },
          ],
        },
      ],
    },
    {
      label: "日计划",
      id: "3",
      children: [
        {
          label: "施工日计划",
          id: "3-1",
          children: [
            {
              label: "审批",
              id: "3-1-1",
            },
            {
              label: "作废",
              id: "3-1-2",
            },
            {
              label: "调整",
              id: "3-1-3",
            },
          ],
        },
        {
          label: "维修日计划",
          id: "3-2",
          children: [
            {
              label: "审批",
              id: "3-2-1",
            },
            {
              label: "作废",
              id: "3-2-2",
            },
            {
              label: "调整",
              id: "3-2-3",
            },
          ],
        },
      ],
    },
  ],
  workIdParam: "",
  trackIdParam: "",
});

const {
  trackIdParam,
  railListarr,
  workIdParam,
  defaultProps1,
  typeobj,
  actionSubmitParam,
  form,
  defaultProps,
  isShowselectionProcessList,
  queryParams,
  railList,
  rules,
} = toRefs(data);
function closeDialog() {
  proxy
    .PsotaxiosFunction(
      { accessToken: sessionStorage.getItem("accessToken"), trackId: trackIdParam.value, workId: workIdParam.value },
      "monitor/instance/state/end"
    )
    .then((res) => {});
}
function queryProcess(row) {
  form.value = JSON.parse(JSON.stringify(row));
  proxy.PsotaxiosFunction({ accessToken: sessionStorage.getItem("accessToken"), flowId: form.value.flowId }, "flow/support/open").then((res) => {
    if (res.workId == "" || res.workId == null) {
      proxy.$modal.msgError(res.flowMsg);
    } else {
      trackIdParam.value = res.flowNode.trackId;
      workIdParam.value = res.workId;
      isShowProcess.value = true;
    }
  });
}
/** 查询列表 */
function getList() {
  loading.value = true;
  selectWorkflowTemplateListapi(queryParams.value).then((res) => {
    if (res.code == 200) {
      data.railList = res.data;
    }
    loading.value = false;
  });
}
getList();

function getList1() {
  proxy.PsotaxiosFunction({ accessToken: sessionStorage.getItem("accessToken"), sort: "created" }, "flow/page").then((res) => {
    if (res.code == 0) {
      railListarr.value = res.data;
      // 获取流程接口
      let obj = {};
      let arr = [];
      for (let i = 0; i < res.data.length; i++) {
        const element = JSON.parse(JSON.stringify(res.data[i]));
        if (obj[element.typeName] == undefined) {
          element.flowName1 = element.typeName;
          obj[element.typeName] = element.typeName;
          arr.push(element);
        }
      }

      for (let a = 0; a < arr.length; a++) {
        arr[a].children = [];
        for (let i = 0; i < res.data.length; i++) {
          const element = JSON.parse(JSON.stringify(res.data[i]));
          if (arr[a].typeName == element.typeName) {
            element.flowName1 = element.flowName;
            arr[a].children.push(element);
          }
        }
      }
      isShowselectionProcessList.value = arr;
    } else {
      proxy.$modal.msgError(res.message);
    }
  });
}
getList1();

/* 删除单行数据 */
function handDelete(row) {
  deleteWorkflowTemplateByIdapi({ id: row }).then((res) => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess("删除成功");
      getList();
    }
  });
}

/** 重置操作表单 */
function reset() {
  form.value = {
    flowName: "",
    flowId: "",
    type: "",
    isDefault: "",
  };
}
/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "新增";
}
function changewitch(row) {
  editWorkflowTemplateapi(row).then((res) => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess("修改成功");
      getList();
    }
  });
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["userRef"].validate((valid) => {
    if (valid) {
      for (let i = 0; i < railListarr.value.length; i++) {
        if (form.value.flowId[form.value.flowId.length - 1] == railListarr.value[i].flowId) {
          form.value.flowName = railListarr.value[i].flowName;
        }
      }
      if (Array.isArray(form.value.flowId)) {
        form.value.flowId = form.value.flowId[form.value.flowId.length - 1];
      }
      form.value.type = form.value.type.join("-");
      if (form.value.id) {
        editWorkflowTemplateapi(form.value).then((res) => {
          if (res.code == 200) {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
          }
        });
      } else {
        insertWorkflowTemplateapi(form.value).then((res) => {
          if (res.code == 200) {
            proxy.$modal.msgSuccess("保存成功");
            open.value = false;
            getList();
          }
        });
      }
    }
  });
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}

//重置
function resetQuery() {
  queryParams.value = {
    centreMileage: "",
  };
  getList();
}
// 查看参数
function handleUpdate(rows) {
  form.value = JSON.parse(JSON.stringify(rows));
  form.value.type = form.value.type.split("-");
  open.value = true;
  title.value = "修改";
}
</script>

<style scoped lang="scss">
.divflex {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .leftx {
    width: 45%;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e8e8e8;
    margin-top: 3px;
  }

  .mainz {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
  }

  .rightx {
    width: 45%;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e8e8e8;
    margin-top: 3px;
  }
}

.buttontext {
  .el-button:hover {
    text-decoration: line-through !important;
  }
}

.el-form--inline .el-form-item.formitemcla {
  margin-right: 5px !important;
}
</style>
